<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Keen - Responsive Bootstrap Admin & Dashboard Template</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="description" content="Keen - Responsive Bootstrap Admin & Dashboard Template"/>
	<link rel="canonical" href="https://keenthemes.com"/>
	<meta property="og:locale" content="en_US"/>
	<meta property="og:type" content="website"/>
	<meta property="og:title" content="Premium Bootstrap Admin Templates"/>
	<meta property="og:description" content="Keen - Responsive Bootstrap Admin & Dashboard Template"/>
	<meta property="og:url" content="https://keenthemes.com/"/>
	<meta property="og:site_name" content="Keenthemes"/>
	<meta property="article:publisher" content="https://www.facebook.com/keenthemes"/>
	<meta name="twitter:card" content="summary_large_image"/>
	<meta name="twitter:description" content="Keen - Responsive Bootstrap Admin & Dashboard Template"/>
	<meta name="twitter:title" content="Premium Bootstrap Admin Templates"/>
	<meta name="twitter:domain" content="Keenthemes"/>

	<link rel="shortcut icon" href="assets/favicon.ico"/>

	<link href="assets/plugins/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"><link href="assets/style/flaticon.css" rel="stylesheet" type="text/css"><link href="assets/plugins/line-awesome/css/line-awesome.min.css" rel="stylesheet" type="text/css"><link href="assets/plugins/socicon/css/socicon.css" rel="stylesheet" type="text/css"><link href="assets/plugins/tether/dist/css/tether.min.css" rel="stylesheet" type="text/css"><link href="assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" type="text/css"><link href="assets/plugins/owl.carousel/dist/assets/owl.carousel.css" rel="stylesheet" type="text/css"><link href="assets/plugins/owl.carousel/dist/assets/owl.theme.default.css" rel="stylesheet" type="text/css"><link href="assets/style/style.css" rel="stylesheet" type="text/css"><link href="assets/plugins/highlight.js/styles/railscasts.css" rel="stylesheet" type="text/css">	<script src="assets/plugins/jquery/dist/jquery.min.js" type="application/javascript"></script><script src="assets/plugins/tether/dist/js/tether.min.js" type="application/javascript"></script><script src="assets/plugins/popper.js/dist/umd/popper.min.js" type="application/javascript"></script><script src="assets/plugins/bootstrap/dist/js/bootstrap.js" type="application/javascript"></script><script src="assets/plugins/perfect-scrollbar/dist/perfect-scrollbar.js" type="application/javascript"></script><script src="assets/plugins/owl.carousel/dist/owl.carousel.js" type="application/javascript"></script><script src="assets/js/custom.js" type="application/javascript"></script><script src="assets/plugins/highlight.js/lib/highlight.js" type="application/javascript"></script><script src="assets/plugins/highlight.js/build/highlight.pack.js" type="application/javascript"></script><script src="assets/js/docs.js" type="application/javascript"></script>
</head>
<body>
<div class="wrapper"><!-- wrapper -->

	<!-- section -->
<section class="section section--header">
    <header><!-- header -->
        <div class="content">
            <div class="header__handler">
                <div class="sidebar">
					<span class="hamburger">
						<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 129 129" enable-background="new 0 0 129 129" width="40px" height="40px">
							<g>
								<path d="m91.4,33.5h-53.8c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.8,4.1 4.1,4.1h53.9c2.3,0 4.1-1.8 4.1-4.1-0.1-2.3-1.9-4.1-4.2-4.1z" fill="#FFFFFF"/>
								<path d="m91.4,87.4h-53.8c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.8,4.1 4.1,4.1h53.9c2.3,0 4.1-1.8 4.1-4.1-0.1-2.3-1.9-4.1-4.2-4.1z" fill="#FFFFFF"/>
								<path d="m91.4,60.4h-53.8c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.8,4.1 4.1,4.1h53.9c2.3,0 4.1-1.8 4.1-4.1-0.1-2.3-1.9-4.1-4.2-4.1z" fill="#FFFFFF"/>
							</g>
						</svg>
					</span>
                    <div class="sidebar__menu_wrap">
                        <span class="sidebar__menu_close">x</span>
                        <ul class="sidebar__menu"><li class="sidebar__menu__item"><a href="index.html" target="" title="Preview"><span>Preview</span></a></li><li class="sidebar__menu__item active"><a href="docs.html" target="" title="Docs"><span>Docs</span></a></li><li class="sidebar__menu__item"><a href="video-tuts.html" target="" title="Video Tuts"><span>Video Tuts</span></a></li><li class="sidebar__menu__item"><a href="changelog.html" target="" title="Changelog"><span>Changelog</span></a></li><li class="sidebar__menu__item highlight"><a href="https://themes.getbootstrap.com/product/keen-the-ultimate-bootstrap-admin-theme/" target="_blank" title="Purchase"><span>Purchase</span></a></li></ul>                    </div>
                </div>
                <a href="https://keenthemes.com/keen" class="logo"><img src="assets/img/logo-keen.png" alt="Keen"></a>
            </div>
            <div class="header__references d-none d-md-block">
                <ul class="main__menu"><li class="main__menu__item"><a href="index.html" target="" title="Preview"><span>Preview</span></a></li><li class="main__menu__item active"><a href="docs.html" target="" title="Docs"><span>Docs</span></a></li><li class="main__menu__item"><a href="video-tuts.html" target="" title="Video Tuts"><span>Video Tuts</span></a></li><li class="main__menu__item"><a href="changelog.html" target="" title="Changelog"><span>Changelog</span></a></li><li class="main__menu__item highlight"><a href="https://themes.getbootstrap.com/product/keen-the-ultimate-bootstrap-admin-theme/" target="_blank" title="Purchase"><span>Purchase</span></a></li></ul>            </div>
        </div>
    </header><!-- header END -->

    <!-- content -->
<div class="content">
    <div class="sub-header">
        <h4 class="title"><span>Keen</span> - The Ultimate Multi-Demo Bootstrap Admin Theme</h4>
        <h4 class="sub-title">
        	The most complete UI/UX template solution for today's web projects of any size
        </h4>
    </div>
</div>
<!-- content END -->
</section>
<!-- section END -->

	<section class="section section--white section--padding"><!-- section -->
	<div id="docs" class="content">

		<div class="contents">
			<!-- contents -->

			<div class="doc-side-menu">
				<i class="la la-bars toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
				<div class="menu-list">
					<ul id="menu-content" class="menu-content collapse"><li class=""><a href="quick-start.html" >Quick Start</a></li><li class=""><a href="javascript:;" data-toggle="collapse" data-target="#a5c7a031966aaa" >Install<div class="arrow"></div></a><ul class="sub-menu collapse " id="a5c7a031966aaa"><li class=""><a href="classic-version.html">Classic Package</a></li><li class=""><a href="installation.html">Default Package</a></li></ul></li><li class=""><a href="demos.html" >Multi-Demo</a></li><li class=""><a href="files-structure.html" >Files Structure</a></li><li class="active"><a href="build-tools.html" >Build Tools</a></li><li class=""><a href="javascript:;" data-toggle="collapse" data-target="#a5c7a031966abf" >Stylesheets<div class="arrow"></div></a><ul class="sub-menu collapse " id="a5c7a031966abf"><li class=""><a href="stylesheets.html">Overview</a></li><li class=""><a href="sass-global.html">Global</a></li><li class=""><a href="sass-demo.html">Demo</a></li></ul></li><li class=""><a href="javascript:;" data-toggle="collapse" data-target="#a5c7a031966ac9" >Javascripts<div class="arrow"></div></a><ul class="sub-menu collapse " id="a5c7a031966ac9"><li class=""><a href="javascripts.html">Overview</a></li><li class=""><a href="js-global.html">Global</a></li><li class=""><a href="js-demo.html">Demo</a></li></ul></li><li class=""><a href="javascript:;" data-toggle="collapse" data-target="#a5c7a031966ae1" >Custom Plugins<div class="arrow"></div></a><ul class="sub-menu collapse " id="a5c7a031966ae1"><li class=""><a href="datatable.html">Keen Datatable</a></li><li class=""><a href="menu.html">Keen Menu</a></li><li class=""><a href="header.html">Keen Header</a></li><li class=""><a href="offcanvas.html">Keen Offcanvas</a></li><li class=""><a href="portlet.html">Keen Portlet</a></li><li class=""><a href="scrolltop.html">Keen Scrolltop</a></li><li class=""><a href="toggle.html">Keen Toggle</a></li><li class=""><a href="wizard.html">Keen Wizard</a></li></ul></li><li class=""><a href="rtl-version.html" >RTL Version</a></li><li class=""><a href="layout-builder.html" >Layout Builder</a></li><li class=""><a href="update.html" >Updates</a></li><li class=""><a href="backend-api.html" >Backend API</a></li><li class=""><a href="references.html" >References</a></li><li class=""><a href="security-notice.html" >Security Notice</a></li></ul>				</div>
			</div>

			<div class="contents__box contents__box--right">
				<!-- contents__box -->
				<div class="section">
    <h2 class="section-head">Build Tools</h2>

    <h3 id="sec4-1" class="section-title">Overview</h3>
    <div class="section-content">
        <p>
            Keen build tools provides easy package management and production deployment for any type of web application that also comes with powerful asset bundle tools to organize
            assets structure with custom
            bundling for production.<br><br>
            Keen's central <code>default.json</code> build config files allows you manage the entire assest bundling for production by taking advantage of <code>yarn</code>
            package manager.
        </p>
    </div>

    <div class="space"></div>

    <h3 id="sec4-2" class="section-title">Build Config</h3>
    <div class="section-content">
        <p>
            The build config file is located at<code>[root]/theme/default/tools/conf/default.json</code> and you can fully customize the build settings to meet your project
            requirements:
        </p>
        <p>Check the dist output path <code>config.dist</code> for the build tools to output the compilation.</p>

        <div class="space"></div>

        <pre><code>{
  "config": {
    "demo": "",
    "debug": false,
    "compile": {
      "rtl": {
        "enabled": true,
        "skip": [
          "socicon",
          "line-awesome",
          "flaticon",
          "flaticon2",
          "fontawesome5",
          "owl.carousel",
          "fullcalendar",
          "bootstrap-datepicker",
          "bootstrap-datetime-picker",
          "nouislider"
        ]
      },
      "jsUglify": false,
      "cssMinify": false,
      "jsSourcemaps": false,
      "cssSourcemaps": false
    },
    "path": {
      "src": "./../themes/themes/keen/src",
      "node_modules": "./../themes/themes/keen/tools/node_modules",
      "core_framework": "./../themes/framework",
      "demo_api_url": "https://keenthemes.com/keen/themes/themes/keen/dist/preview/"
    },
    "dist": [
      "./../themes/themes/keen/dist/preview/assets",
      "./../themes/themes/keen/dist/default/**/assets"
    ]
  },
  "build": {
    "vendors": {
      "base": {
        "src": {
          "mandatory": {
            "jquery": {
              "scripts": [
                "{$config.path.node_modules}/jquery/dist/jquery.js"
              ]
            },
            "popper.js": {
              "scripts": [
                "{$config.path.node_modules}/popper.js/dist/umd/popper.js"
              ]
            },
            "bootstrap": {
              "scripts": [
                "{$config.path.node_modules}/bootstrap/dist/js/bootstrap.min.js"
              ]
            },
            "js-cookie": {
              "scripts": [
                "{$config.path.node_modules}/js-cookie/src/js.cookie.js"
              ]
            },
            "moment": {
              "scripts": [
                "{$config.path.node_modules}/moment/min/moment.min.js"
              ]
            },
            "tooltip.js": {
              "scripts": [
                "{$config.path.node_modules}/tooltip.js/dist/umd/tooltip.min.js"
              ]
            },
            "perfect-scrollbar": {
              "styles": [
                "{$config.path.node_modules}/perfect-scrollbar/css/perfect-scrollbar.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/perfect-scrollbar/dist/perfect-scrollbar.js"
              ]
            },
            "sticky-js": {
              "scripts": [
                "{$config.path.node_modules}/sticky-js/dist/sticky.min.js"
              ]
            },
            "wnumb": {
              "scripts": [
                "{$config.path.node_modules}/wnumb/wNumb.js"
              ]
            }
          },
          "optional": {
            "jquery-form": {
              "scripts": [
                "{$config.path.node_modules}/jquery-form/dist/jquery.form.min.js"
              ]
            },
            "tether": {
              "styles": [
                "{$config.path.node_modules}/tether/dist/css/tether.css"
              ],
              "scripts": []
            },
            "block-ui": {
              "scripts": [
                "{$config.path.node_modules}/block-ui/jquery.blockUI.js"
              ]
            },
            "bootstrap-datepicker": {
              "styles": [
                "{$config.path.node_modules}/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js",
                "{$config.path.core_framework}/components/vendors/bootstrap-datepicker/init.js"
              ]
            },
            "bootstrap-datetime-picker": {
              "styles": [
                "{$config.path.node_modules}/bootstrap-datetime-picker/css/bootstrap-datetimepicker.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/bootstrap-datetime-picker/js/bootstrap-datetimepicker.min.js"
              ]
            },
            "bootstrap-timepicker": {
              "styles": [
                "{$config.path.node_modules}/bootstrap-timepicker/css/bootstrap-timepicker.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/bootstrap-timepicker/js/bootstrap-timepicker.min.js",
                "{$config.path.core_framework}/components/vendors/bootstrap-timepicker/init.js"
              ]
            },
            "bootstrap-daterangepicker": {
              "styles": [
                "{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.js"
              ]
            },
            "bootstrap-touchspin": {
              "styles": [
                "{$config.path.node_modules}/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.js"
              ]
            },
            "bootstrap-maxlength": {
              "scripts": [
                "{$config.path.node_modules}/bootstrap-maxlength/src/bootstrap-maxlength.js"
              ]
            },
            "bootstrap-multiselectsplitter": {
              "scripts": [
                "{$config.path.core_framework}/vendors/bootstrap-multiselectsplitter/bootstrap-multiselectsplitter.min.js"
              ]
            },
            "bootstrap-select": {
              "styles": [
                "{$config.path.node_modules}/bootstrap-select/dist/css/bootstrap-select.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/bootstrap-select/dist/js/bootstrap-select.js"
              ]
            },
            "typeahead.js": {
              "scripts": [
                "{$config.path.node_modules}/typeahead.js/dist/typeahead.bundle.js",
                "{$config.path.node_modules}/handlebars/dist/handlebars.js"
              ]
            },
            "inputmask": {
              "scripts": [
                "{$config.path.node_modules}/inputmask/dist/jquery.inputmask.bundle.js",
                "{$config.path.node_modules}/inputmask/dist/inputmask/inputmask.date.extensions.js",
                "{$config.path.node_modules}/inputmask/dist/inputmask/inputmask.numeric.extensions.js"
              ]
            },
            "nouislider": {
              "styles": [
                "{$config.path.node_modules}/nouislider/distribute/nouislider.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/nouislider/distribute/nouislider.js"
              ]
            },
            "owl.carousel": {
              "styles": [
                "{$config.path.node_modules}/owl.carousel/dist/assets/owl.carousel.css",
                "{$config.path.node_modules}/owl.carousel/dist/assets/owl.theme.default.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/owl.carousel/dist/owl.carousel.js"
              ],
              "images": [
                "{$config.path.node_modules}/owl.carousel/dist/assets/owl.video.play.png",
                "{$config.path.node_modules}/owl.carousel/dist/assets/ajax-loader.gif"
              ]
            },
            "autosize": {
              "scripts": [
                "{$config.path.node_modules}/autosize/dist/autosize.js"
              ]
            },
            "clipboard": {
              "scripts": [
                "{$config.path.node_modules}/clipboard/dist/clipboard.min.js"
              ]
            },
            "dropzone": {
              "styles": [
                "{$config.path.node_modules}/dropzone/dist/dropzone.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/dropzone/dist/dropzone.js"
              ]
            },
            "summernote": {
              "styles": [
                "{$config.path.node_modules}/summernote/dist/summernote.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/summernote/dist/summernote.js"
              ],
              "fonts": [
                "{$config.path.node_modules}/summernote/dist/font/**"
              ]
            },
            "bootstrap-makrdown": {
              "styles": [
                "{$config.path.node_modules}/bootstrap-markdown/css/bootstrap-markdown.min.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/markdown/lib/markdown.js",
                "{$config.path.node_modules}/bootstrap-markdown/js/bootstrap-markdown.js",
                "{$config.path.core_framework}/components/vendors/bootstrap-markdown/init.js"
              ]
            },
            "jquery-validation": {
              "scripts": [
                "{$config.path.node_modules}/jquery-validation/dist/jquery.validate.js",
                "{$config.path.node_modules}/jquery-validation/dist/additional-methods.js",
                "{$config.path.core_framework}/components/vendors/jquery-validation/init.js"
              ]
            },
            "animate.css": {
              "styles": [
                "{$config.path.node_modules}/animate.css/animate.css"
              ]
            },
            "toastr": {
              "styles": [
                "{$config.path.node_modules}/toastr/build/toastr.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/toastr/build/toastr.min.js"
              ]
            },
            "morris.js": {
              "styles": [
                "{$config.path.node_modules}/morris.js/morris.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/raphael/raphael.js",
                "{$config.path.node_modules}/morris.js/morris.js"
              ]
            },
            "chart.js": {
              "scripts": [
                "{$config.path.node_modules}/chart.js/dist/Chart.bundle.js"
              ]
            },
            "bootstrap-session-timeout": {
              "scripts": [
                "{$config.path.core_framework}/vendors/bootstrap-session-timeout/dist/bootstrap-session-timeout.min.js"
              ]
            },
            "jquery-idletimer": {
              "scripts": [
                "{$config.path.core_framework}/vendors/jquery-idletimer/idle-timer.min.js"
              ]
            },
            "counterup": {
              "scripts": [
                "{$config.path.node_modules}/waypoints/lib/jquery.waypoints.js",
                "{$config.path.node_modules}/counterup/jquery.counterup.js"
              ]
            },
            "sweetalert2": {
              "styles": [
                "{$config.path.node_modules}/sweetalert2/dist/sweetalert2.css"
              ],
              "scripts": [
                "{$config.path.node_modules}/es6-promise-polyfill/promise.min.js",
                "{$config.path.node_modules}/sweetalert2/dist/sweetalert2.min.js",
                "{$config.path.core_framework}/components/vendors/sweetalert2/init.js"
              ]
            },
            "jquery.repeater": {
              "scripts": [
                "{$config.path.node_modules}/jquery.repeater/src/lib.js",
                "{$config.path.node_modules}/jquery.repeater/src/jquery.input.js",
                "{$config.path.node_modules}/jquery.repeater/src/repeater.js"
              ]
            },
            "socicon": {
              "styles": [
                "{$config.path.node_modules}/socicon/css/socicon.css"
              ],
              "fonts": [
                "{$config.path.node_modules}/socicon/font/**"
              ]
            },
            "dompurify": {
              "scripts": [
                "{$config.path.node_modules}/dompurify/dist/purify.js"
              ]
            },
            "line-awesome": {
              "styles": [
                "{$config.path.core_framework}/vendors/line-awesome/css/line-awesome.css"
              ],
              "fonts": [
                "{$config.path.core_framework}/vendors/line-awesome/fonts/**"
              ]
            },
            "flaticon": {
              "styles": [
                "{$config.path.core_framework}/vendors/flaticon/flaticon.css"
              ],
              "fonts": [
                "{$config.path.core_framework}/vendors/flaticon/font/**"
              ]
            },
            "flaticon2": {
              "styles": [
                "{$config.path.core_framework}/vendors/flaticon2/flaticon.css"
              ],
              "fonts": [
                "{$config.path.core_framework}/vendors/flaticon2/font/**"
              ]
            },
            "fontawesome5": {
              "styles": [
                "{$config.path.core_framework}/vendors/fontawesome5/css/all.min.css"
              ],
              "fonts": [
                "{$config.path.core_framework}/vendors/fontawesome5/webfonts/**"
              ]
            }
          }
        },
        "bundle": {
          "styles": "{$config.output}/vendors/base/vendors.bundle.css",
          "scripts": "{$config.output}/vendors/base/vendors.bundle.js",
          "images": "{$config.output}/vendors/base/images",
          "fonts": "{$config.output}/vendors/base/fonts"
        }
      },
      "custom": {
        "jquery-ui": {
          "src": {
            "styles": [
              "{$config.path.core_framework}/vendors/jquery-ui/jquery-ui.min.css"
            ],
            "scripts": [
              "{$config.path.core_framework}/vendors/jquery-ui/jquery-ui.min.js"
            ],
            "images": [
              "{$config.path.core_framework}/vendors/jquery-ui/images/*"
            ]
          },
          "bundle": {
            "styles": "{$config.output}/vendors/custom/jquery-ui/jquery-ui.bundle.css",
            "scripts": "{$config.output}/vendors/custom/jquery-ui/jquery-ui.bundle.js",
            "images": "{$config.output}/vendors/custom/jquery-ui/images"
          }
        },
        "fullcalendar": {
          "src": {
            "styles": [
              "{$config.path.node_modules}/fullcalendar/dist/fullcalendar.css"
            ],
            "scripts": [
              "{$config.path.node_modules}/fullcalendar/dist/fullcalendar.js",
              "{$config.path.node_modules}/fullcalendar/dist/gcal.js"
            ]
          },
          "bundle": {
            "styles": "{$config.output}/vendors/custom/fullcalendar/fullcalendar.bundle.css",
            "scripts": "{$config.output}/vendors/custom/fullcalendar/fullcalendar.bundle.js"
          }
        },
        "gmaps": {
          "src": {
            "scripts": [
              "{$config.path.node_modules}/gmaps/gmaps.js"
            ]
          },
          "bundle": {
            "scripts": "{$config.output}/vendors/custom/gmaps/gmaps.js"
          }
        },
        "jquery-flot": {
          "src": {
            "scripts": [
              "{$config.path.node_modules}/jquery-flot/jquery.flot.js",
              "{$config.path.node_modules}/jquery-flot/jquery.flot.resize.js",
              "{$config.path.node_modules}/jquery-flot/jquery.flot.categories.js",
              "{$config.path.node_modules}/jquery-flot/jquery.flot.pie.js",
              "{$config.path.node_modules}/jquery-flot/jquery.flot.stack.js",
              "{$config.path.node_modules}/jquery-flot/jquery.flot.crosshair.js",
              "{$config.path.node_modules}/jquery-flot/jquery.flot.axislabels.js"
            ]
          },
          "bundle": {
            "scripts": "{$config.output}/vendors/custom/flot/flot.bundle.js"
          }
        },
        "datatables.net": {
          "src": {
            "styles": [
              "{$config.path.node_modules}/datatables.net-bs4/css/dataTables.bootstrap4.css",
              "{$config.path.node_modules}/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css",
              "{$config.path.node_modules}/datatables.net-autofill-bs4/css/autoFill.bootstrap4.min.css",
              "{$config.path.node_modules}/datatables.net-colreorder-bs4/css/colReorder.bootstrap4.min.css",
              "{$config.path.node_modules}/datatables.net-fixedcolumns-bs4/css/fixedColumns.bootstrap4.min.css",
              "{$config.path.node_modules}/datatables.net-fixedheader-bs4/css/fixedHeader.bootstrap4.min.css",
              "{$config.path.node_modules}/datatables.net-keytable-bs4/css/keyTable.bootstrap4.min.css",
              "{$config.path.node_modules}/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css",
              "{$config.path.node_modules}/datatables.net-rowgroup-bs4/css/rowGroup.bootstrap4.min.css",
              "{$config.path.node_modules}/datatables.net-rowreorder-bs4/css/rowReorder.bootstrap4.min.css",
              "{$config.path.node_modules}/datatables.net-scroller-bs4/css/scroller.bootstrap4.min.css",
              "{$config.path.node_modules}/datatables.net-select-bs4/css/select.bootstrap4.min.css"
            ],
            "scripts": [
              "{$config.path.node_modules}/datatables.net/js/jquery.dataTables.js",
              "{$config.path.node_modules}/datatables.net-bs4/js/dataTables.bootstrap4.js",
              "{$config.path.core_framework}/components/vendors/datatables/init.js",
              "{$config.path.node_modules}/datatables.net-autofill/js/dataTables.autoFill.min.js",
              "{$config.path.node_modules}/datatables.net-autofill-bs4/js/autoFill.bootstrap4.min.js",
              "{$config.path.node_modules}/jszip/dist/jszip.min.js",
              "{$config.path.node_modules}/pdfmake/build/pdfmake.min.js",
              "{$config.path.node_modules}/pdfmake/build/vfs_fonts.js",
              "{$config.path.node_modules}/datatables.net-buttons/js/dataTables.buttons.min.js",
              "{$config.path.node_modules}/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js",
              "{$config.path.node_modules}/datatables.net-buttons/js/buttons.colVis.js",
              "{$config.path.node_modules}/datatables.net-buttons/js/buttons.flash.js",
              "{$config.path.node_modules}/datatables.net-buttons/js/buttons.html5.js",
              "{$config.path.node_modules}/datatables.net-buttons/js/buttons.print.js",
              "{$config.path.node_modules}/datatables.net-colreorder/js/dataTables.colReorder.min.js",
              "{$config.path.node_modules}/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js",
              "{$config.path.node_modules}/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js",
              "{$config.path.node_modules}/datatables.net-keytable/js/dataTables.keyTable.min.js",
              "{$config.path.node_modules}/datatables.net-responsive/js/dataTables.responsive.min.js",
              "{$config.path.node_modules}/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js",
              "{$config.path.node_modules}/datatables.net-rowgroup/js/dataTables.rowGroup.min.js",
              "{$config.path.node_modules}/datatables.net-rowreorder/js/dataTables.rowReorder.min.js",
              "{$config.path.node_modules}/datatables.net-scroller/js/dataTables.scroller.min.js",
              "{$config.path.node_modules}/datatables.net-select/js/dataTables.select.min.js"
            ]
          },
          "bundle": {
            "styles": "{$config.output}/vendors/custom/datatables/datatables.bundle.css",
            "scripts": "{$config.output}/vendors/custom/datatables/datatables.bundle.js"
          }
        }
      }
    },
    "demo": {
      "default": {
        "base": {
          "src": {
            "media": [
              "{$config.path.src}/theme/demo/default/media/**/*.*"
            ],
            "styles": [
              "{$config.path.src}/theme/demo/default/sass/style.scss"
            ],
            "scripts": [
              "{$config.path.core_framework}/lib/util.js",
              "{$config.path.core_framework}/lib/app.js",
              "{$config.path.core_framework}/components/foundation/**/*.js",
              "{$config.path.src}/theme/framework/components/base/**/*.js",
              "{$config.path.src}/theme/demo/default/scripts/bundle/layout.js",
              "{$config.path.src}/theme/demo/default/scripts/bundle/aside-secondary.js"
            ]
          },
          "bundle": {
            "styles": "{$config.output}/demo/default/base/style.bundle.css",
            "scripts": "{$config.output}/demo/default/base/scripts.bundle.js"
          },
          "output": {
            "media": "{$config.output}/demo/default/media"
          }
        },
        "skins": {
          "header": {
            "src": {
              "styles": [
                "{$config.path.src}/theme/demo/default/sass/header/skins/**/*.scss"
              ]
            },
            "output": {
              "styles": "{$config.output}/demo/default/skins/header/"
            }
          },
          "brand": {
            "src": {
              "styles": [
                "{$config.path.src}/theme/demo/default/sass/brand/skins/**/*.scss"
              ]
            },
            "output": {
              "styles": "{$config.output}/demo/default/skins/brand/"
            }
          },
          "aside": {
            "src": {
              "styles": [
                "{$config.path.src}/theme/demo/default/sass/aside/skins/**/*.scss"
              ]
            },
            "output": {
              "styles": "{$config.output}/demo/default/skins/aside/"
            }
          }
        }
      },
      "demo2": {
        "base": {
          "src": {
            "media": [
              "{$config.path.src}/theme/demo/demo2/media/**/*.*"
            ],
            "styles": [
              "{$config.path.src}/theme/demo/demo2/sass/style.scss"
            ],
            "scripts": [
              "{$config.path.core_framework}/lib/util.js",
              "{$config.path.core_framework}/lib/app.js",
              "{$config.path.core_framework}/components/foundation/**/*.js",
              "{$config.path.src}/theme/framework/components/base/**/*.js",
              "{$config.path.src}/theme/demo/demo2/scripts/bundle/layout.js"
            ]
          },
          "bundle": {
            "styles": "{$config.output}/demo/demo2/base/style.bundle.css",
            "scripts": "{$config.output}/demo/demo2/base/scripts.bundle.js"
          },
          "output": {
            "media": "{$config.output}/demo/demo2/media"
          }
        },
        "skins": {
          "src": {
            "styles": [
              "{$config.path.src}/theme/demo/demo2/sass/aside/skins/**/*.scss"
            ]
          },
          "output": {
            "styles": "{$config.output}/demo/demo2/skins/aside/"
          }
        }
      },
      "demo3": {
        "base": {
          "src": {
            "media": [
              "{$config.path.src}/theme/demo/demo3/media/**/*.*"
            ],
            "styles": [
              "{$config.path.src}/theme/demo/demo3/sass/style.scss"
            ],
            "scripts": [
              "{$config.path.core_framework}/lib/util.js",
              "{$config.path.core_framework}/lib/app.js",
              "{$config.path.core_framework}/components/foundation/**/*.js",
              "{$config.path.src}/theme/framework/components/base/**/*.js",
              "{$config.path.src}/theme/demo/demo3/scripts/bundle/layout.js"
            ]
          },
          "bundle": {
            "styles": "{$config.output}/demo/demo3/base/style.bundle.css",
            "scripts": "{$config.output}/demo/demo3/base/scripts.bundle.js"
          },
          "output": {
            "media": "{$config.output}/demo/demo3/media"
          }
        }
      },
      "demo4": {
        "base": {
          "src": {
            "media": [
              "{$config.path.src}/theme/demo/demo4/media/**/*.*"
            ],
            "styles": [
              "{$config.path.src}/theme/demo/demo4/sass/style.scss"
            ],
            "scripts": [
              "{$config.path.core_framework}/lib/util.js",
              "{$config.path.core_framework}/lib/app.js",
              "{$config.path.core_framework}/components/foundation/**/*.js",
              "{$config.path.src}/theme/framework/components/base/**/*.js",
              "{$config.path.src}/theme/demo/demo4/scripts/bundle/layout.js"
            ]
          },
          "bundle": {
            "styles": "{$config.output}/demo/demo4/base/style.bundle.css",
            "scripts": "{$config.output}/demo/demo4/base/scripts.bundle.js"
          },
          "output": {
            "media": "{$config.output}/demo/demo4/media"
          }
        }
      },
      "demo5": {
        "base": {
          "src": {
            "media": [
              "{$config.path.src}/theme/demo/demo5/media/**/*.*"
            ],
            "styles": [
              "{$config.path.src}/theme/demo/demo5/sass/style.scss"
            ],
            "scripts": [
              "{$config.path.core_framework}/lib/util.js",
              "{$config.path.core_framework}/lib/app.js",
              "{$config.path.core_framework}/components/foundation/**/*.js",
              "{$config.path.src}/theme/framework/components/base/**/*.js",
              "{$config.path.src}/theme/demo/demo5/scripts/bundle/layout.js"
            ]
          },
          "bundle": {
            "styles": "{$config.output}/demo/demo5/base/style.bundle.css",
            "scripts": "{$config.output}/demo/demo5/base/scripts.bundle.js"
          },
          "output": {
            "media": "{$config.output}/demo/demo5/media"
          }
        },
        "skins": {
          "src": {
            "styles": [
              "{$config.path.src}/theme/demo/demo5/sass/header/skins/**/*.scss"
            ]
          },
          "output": {
            "styles": "{$config.output}/demo/demo5/skins/header/"
          }
        }
      },
      "demo6": {
        "base": {
          "src": {
            "media": [
              "{$config.path.src}/theme/demo/demo6/media/**/*.*"
            ],
            "styles": [
              "{$config.path.src}/theme/demo/demo6/sass/style.scss"
            ],
            "scripts": [
              "{$config.path.core_framework}/lib/util.js",
              "{$config.path.core_framework}/lib/app.js",
              "{$config.path.core_framework}/components/foundation/**/*.js",
              "{$config.path.src}/theme/framework/components/base/**/*.js",
              "{$config.path.src}/theme/demo/demo6/scripts/bundle/layout.js"
            ]
          },
          "bundle": {
            "styles": "{$config.output}/demo/demo6/base/style.bundle.css",
            "scripts": "{$config.output}/demo/demo6/base/scripts.bundle.js"
          },
          "output": {
            "media": "{$config.output}/demo/demo6/media"
          }
        },
        "skins": {
          "src": {
            "styles": [
              "{$config.path.src}/theme/demo/demo6/sass/aside/skins/**/*.scss"
            ]
          },
          "output": {
            "styles": "{$config.output}/demo/demo6/skins/aside/"
          }
        }
      }
    },
    "app": {
      "custom": {
        "src": {
          "styles-by-demo": [
            "{$config.path.src}/theme/app/custom/**/*.scss"
          ],
          "scripts": [
            "{$config.path.src}/theme/app/custom/**/*.js"
          ],
          "media": [
            "{$config.path.src}/media/**/*.*"
          ]
        },
        "output": {
          "styles-by-demo": "{$config.output}/app/custom/",
          "scripts": "{$config.output}/app/custom/",
          "media": "{$config.output}/media/"
        }
      },
      "bundle": {
        "src": {
          "scripts": [
            "{$config.path.src}/theme/app/bundle/**/*.js"
          ]
        },
        "bundle": {
          "scripts": "{$config.output}/app/bundle/app.bundle.js"
        }
      }
    }
  }
}</code></pre>

        <div class="alert alert-warning" style="margin: 25px 0 25px 0;">
            <h4 class="section-subtitle">Required Core CSS and JS files</h4>
            <p>Vendors list under <code>build.vendors.base.src.mandatory</code> is required, and the
                <code>build.vendors.base.src.optional</code> is optional. Also JS & CSS files in
                <code>build.demo.[demo_id]*</code> is required for specific demo styles and scripts.</p>
            <p>*<code>[demo_id]</code> is the unique demo name, like default, demo2, demo3, etc.</p>
        </div>

        <table class="table-list">
            <thead>
            <tr>
                <th colspan="3">Build Config</th>
            </tr>
            </thead>
            <thead>
            <tr>
                <th class="force-border">Field</th>
                <th class="force-border">Type</th>
                <th class="force-border">Description</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td nowrap><code>config.demo</code></td>
                <td nowrap><code>string</code></td>
                <td>Specify an ID of the selected demo for gulp tool to build assets only for selected demo</td>
            </tr>
            <tr>
                <td nowrap><code>config.debug</code></td>
                <td nowrap><code>boolean</code></td>
                <td>Enable/disable debug console log.</td>
            </tr>
            <tr>
                <td nowrap><code>config.compile.rtl.enabled</code></td>
                <td nowrap><code>boolean</code></td>
                <td>Enable/disable compilation with RTL version of CSS along with default LTR CSS.</td>
            </tr>
            <tr>
                <td nowrap><code>config.compile.rtl.skip</code></td>
                <td nowrap><code>array</code></td>
                <td>An array of plugin to be skipped from being compile as RTL.</td>
            </tr>
            <tr>
                <td nowrap><code>config.compile.jsUglify</code></td>
                <td nowrap><code>boolean</code></td>
                <td>Enable/disable output Javascript minify.</td>
            </tr>
            <tr>
                <td nowrap><code>config.compile.cssMinify</code></td>
                <td nowrap><code>boolean</code></td>
                <td>Enable/disable output CSS minify.</td>
            </tr>
            <tr>
                <td nowrap><code>config.compile.jsSourcemaps</code></td>
                <td nowrap><code>boolean</code></td>
                <td>Enable/disable output Javascript with sourcemaps.</td>
            </tr>
            <tr>
                <td nowrap><code>config.compile.cssSourcemaps</code></td>
                <td nowrap><code>boolean</code></td>
                <td>Enable/disable output CSS with sourcemaps.</td>
            </tr>
            <tr>
                <td nowrap><code>config.path</code></td>
                <td nowrap><code>object</code></td>
                <td>
                    Predefined paths the where <code>src/</code>, <code>node_modules/</code> and
                    <code>[root]/theme/default/src/</code> are located.
                    <code>demo_api_url</code> is the ajax API path used by datatables, dropdowns with live search and other json server side data source related demos.
                </td>
            </tr>
            <tr>
                <td nowrap><code>config.dist</code></td>
                <td nowrap><code>object</code></td>
                <td>
                    <code>dist</code> stands for
                    <code>distributable</code> and refers to the directories where the minified and bundled assets will be stored for production uses.
                </td>
            </tr>
            </tbody>
            <thead>
            <tr>
                <th colspan="3" class="force-border">Build Items</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td nowrap><code>build.vendors</code></td>
                <td nowrap><code>object</code></td>
                <td><code>vendors</code> object specifies all 3rd party resources to be deployed to
                    <code>assets/vendors/</code> folder for production usage
                </td>
            </tr>
            <tr>
                <td nowrap><code>build.vendors.base</code></td>
                <td nowrap><code>object</code></td>
                <td>This object specifies global 3rd party resources to be added into the base css and js vendors bundles
                    <code>assets/vendors/base/vendors.bundle.js</code> and
                    <code>assets/vendors/base/vendors.bundle.css</code><br><br>
                    The 3rd party plugin images or font files also will be deployed into
                    <code>assets/vendors/base/images</code> and
                    <code>assets/vendors/base/fonts</code>
                </td>
            </tr>
            <tr>
                <td nowrap><code>build.vendors.custom</code></td>
                <td nowrap><code>object</code></td>
                <td>
                    This object specifies 3rd party resources that are included on demand from
                    <code>assets/vendors/custom/</code> folder
                </td>
            </tr>

            <tr>
                <td nowrap><code>build.demo.default</code></td>
                <td nowrap><code>object</code></td>
                <td>
                    <code>Default</code> demo assets
                </td>
            </tr>

            <tr>
                <td nowrap><code>build.demo.default.base</code></td>
                <td nowrap><code>object</code></td>
                <td>
                    This object specifies the global assets of the demo to be added into the base css and js demo bundles
                    <code>assets/demo/default/base/scripts.bundle.js</code>
                    and <code>assets/demo/default/base/styles.bundle.css</code><br><br>
                    The media(e.g: images) of the demo are deployed into
                    <code>assets/demo/default/media</code>
                </td>
            </tr>
            <tr>
                <td nowrap><code>build.demo.default.custom</code></td>
                <td nowrap><code>object</code></td>
                <td>
                    This object specifies custom assets that are included on demand from
                    <code>assets/demo/default/custom/</code> folder
                </td>
            </tr>
            <tr>
                <td nowrap><code>build.app</code></td>
                <td nowrap><code>object</code></td>
                <td>
                    This object specifies application level global assets that are included on demand from
                    <code>assets/app/</code> folder.
                    Useful if you want to add custom scripts that are used in some spesific pages only.
                </td>
            </tr>
        </table>
    </div>

    <div class="space"></div>

    <h3 id="build-tasks" class="section-title">Build Tasks</h3>
    <div class="section-content">
        <p class="alert alert-danger" style="margin: 25px 0 25px 0;">Update the <code>Node.js</code>, global <code>npm</code> and <code>yarn</code> to the latest version, if you got the error related to the <code>node-sass</code>.</p>

        <div class="section-content">
            <p>Launch your terminal and change its current directory to the project's tools folder where the build files are located. All commands below must be run in this tools folder.</p>
            <pre><code>cd [root]/theme/default/tools/</code></pre>

	        <div class="space"></div>

            <p>
                For the first time launch, run the command below to install the npm dependencies defined in
                <code>[root]/theme/default/tools/package.json</code> (if you haven't done it) :
            </p>
            <pre><code>yarn</code></pre>

	        <div class="space"></div>

            <p>
                After every modification in <code>[root]/theme/default/src/</code>, run below task to compile the assets as defined in
                <code>[root]/theme/default/tools/conf/default.json</code> :
            </p>
            <pre><code>gulp</code></pre>

	        <p class="alert alert-danger" style="margin: 25px 0 25px 0;">If <code>gulp</code> command is not working, try to remove <code>[root]/theme/default/tools/node_modules</code> folder, and reinstall dependencies using <code>yarn</code>.</p>

	        <div class="space"></div>

            <p>The command <code>gulp apiurl</code> is an optional gulp task for demo purpose. It does set all the demo backend URL to point to demo API server.
                For example in the source code, some demo is set as relative URL. By using this command, all the demo URL will be converted to absolute URL.
                The demo URL is set in the <code>[root]/theme/default/tools/package.json</code> file in <code>config.path.demo_api_url</code>.</p>
            <pre><code>gulp apiurl</code></pre>

	        <div class="space"></div>

            <p>Provide parameter <code>--rtl</code> to gulp task. This command disable from generating RTL CSS. If this param does not exist, by default RTL generate will be enabled.</p>
            <pre><code>gulp --rtl=false</code></pre>

	        <div class="space"></div>

            <p>Provide parameter <code>--demo</code> to gulp task. This command will generate assets based on the selected demo only.</p>
            <pre><code>gulp --demo=demo2</code></pre>
	        The param allow multiple demos separated by comma.
            <pre><code>gulp --demo=demo2,demo5,demo7</code></pre>

	        <div class="space"></div>

            <p>Provide parameter <code>--prod</code> to gulp task. This command will minify all the JS and CSS.</p>
            <pre><code>gulp --prod</code></pre>

	        <div class="space"></div>

            <p>Base theme CSS & JS in <code>[root]/theme/default/src/</code>. When you run gulp, all CSS & JS from <code>[root]/theme/default/src/</code> will be compiled and place in several demo locations.
                The compile output folder is defined in <code>[root]/theme/default/tools/conf/default.json</code> file, under <code>config.dist</code>.
                You can create another compile output path.
            </p>
            <pre><code>"dist": [
	"./../themes/themes/keen/dist/preview/assets",
	"./../themes/themes/keen/dist/default/**/assets"
]</code></pre>
        </div>

	    <div class="space"></div>

        <p>Gulp can run automatically when a file changed. Watch tasks file is located in <code>[root]/theme/default/tools/gulp/watch.js</code>.</p>
        <p>To run watcher for all JS and SCSS files. Run command below.</p>
        <pre><code>gulp watch</code></pre>
        <p>You also can run watcher separately for JS and SCSS.</p>
        <pre><code>gulp watch:js</code></pre>
        <pre><code>gulp watch:scss</code></pre>
    </div>

    <div class="space"></div>

    <h3 id="sec4-4" class="section-title">Localhost</h3>
    <div class="section-content">
        <p><code>Gulp-connect</code> plugin use to run a simple webserver to run the HTML files.</p>

        <p>Note that server side ajax examples are not supported using this webserver and for full functionality, please refer to online preview: <code><a href="https://keenthemes.com/keen/preview" target="_blank">https://keenthemes.com/keen/preview</a></code>
            For the server side scripts demos, refer to the <code>[root]/docs/api_reference</code> in the docs folder.</p>

        <p>Open a <code>console</code> and run below command.</p>

        <pre><code>gulp localhost</code></pre>

        <p>Keep the console open. Open this link to run <code><a href="http://localhost:8080/default/" target="_blank">http://localhost:8080/default/</a></code></p>
    </div>

</div>
			</div>
			<!-- contents END -->

		</div>
	</div>
</section><!-- section END -->

	
	<!-- section -->
	<section class="section section--bg-features shadow-top-inset">
		<div class="content"><!-- content -->
			<div class="row intro-header">
				<div class="desc">
					<h3 class="title">Keen’s Key Features</h3>
					<p class="text">
						Keen empowers your project with virtually limitless array of options<br> 
						to create endless unique projects.
					</p>
					<ul class="listing">
						<li><span class="bullet"></span>Based On <strong>Bootstrap 4.x</strong></li>
						<li><span class="bullet"></span><strong>Multi-Demo</strong> Concept</li>
						<li><span class="bullet"></span><strong>Enterprise Ready</strong> Architect</li>
						<li><span class="bullet"></span>Integrated Build Tools: <strong>Gulp, NPM, Yarn, SASS</strong></li>
						<li><span class="bullet"></span><strong>Full RTL</strong> Support</li>
						<li><span class="bullet"></span>Included <strong>Classic(without build tool) Version</strong></li>
						<li><span class="bullet"></span><strong>Enterprise Ready</strong> Core Framework</li>
						<li><span class="bullet"></span><strong>Full SASS</strong> Support</li>
						<li><span class="bullet"></span>Re-Usable <strong>Component System</strong></li>
						<li><span class="bullet"></span>And many more...</li>
					</ul>
				</div>
			</div>
		</div><!-- content END -->
	</section>
	<!-- section END -->

	<!-- section -->
	<section class="section section--white shadow-top">
		<div class="content content--padding">
			<div class="x-owl-carousel owl-theme" data-items="1" data-loop="1" data-autoplay="1" data-margin="30" data-responsive-Class="true" data-smart-Speed="3000" data-autoplay-Timeout="6000" data-transition-Style="fade">
				<div class="item">
					<blockquote class="blockquote">
						We truly hope that our love and dedication to produce an incredibly powerful high level solution suits all your project needs. We will continue to deliver incredible enterprise ready solutions for Angular, React and VueJS to serve you better. We sincerely hope you enjoyed using Keen as much as we enjoyed building it.
						<p class="blockquote__author">Sean,<span>&nbsp;&nbsp;Keenthemes Co-Author</span></p>
					</blockquote>
				</div>
			</div>
		</div>
	</section>
	<!-- section END -->


	<footer class="section section--bg-footer">
    <img src="assets/img/logo-keenthemes.png" alt="" >
    <form action="//keenthemes.us3.list-manage.com/subscribe/post?u=b10f23244c11e2946463ea844&amp;id=6998d1f883" method="post" id="mc-embedded-subscribe-form"
          name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div class="subscribe">
            <input type="email" name="EMAIL" placeholder="Enter your email to subscribe newsletter">
            <button type="submit" class="button button-subscribe" name="subscribe">Submit</button>
        </div>
    </form>

    <div class="socials">
        <a href="http://twitter.com/keenthemes" target="_blank"><i class="socicon-twitter"></i></a>
        <a href="https://dribbble.com/keenthemes" target="_blank"><i class="socicon-dribbble"></i></a>
        <a href="https://themes.getbootstrap.com/product/keen-the-ultimate-bootstrap-admin-theme/" target="_blank"><img class="img-fluid" src="assets/img/icon-bootstrap.png"></a>
    </div>
</footer>

</div><!-- wrapper END -->

</body>
</html>
